<template>
	<view>
		<uv-transition :show="loading" mode="fade" :duration="300" :custom-style="{
			position: 'fixed',
			top: 0,
			left: 0,
			right: 0,
			bottom: 0,
			backgroundColor: backgroundColor,
			display: loading ? 'flex' : 'none',
			alignItems: 'center',
			justifyContent: 'center',
			zIndex: 99999,
			pointerEvents: loading ? 'auto' : 'none'
		}">
			<view class="box">
				<view class="three-body">
					<view class="three-body__dot"></view>
					<view class="three-body__dot"></view>
					<view class="three-body__dot"></view>
				</view>

				<view class="loading-text" :style="{
					'color': textColor || '#4e4e4e',
					'font-size': textSize ? `${textSize}rpx` : '24rpx'
				}">
					<text>{{ loadingText }}</text>
				</view>
			</view>
		</uv-transition>
	</view>
</template>

<script>
export default {
	name: "PLoader",
	data() {
		return {

		};
	},

	props: {
		loading: {
			type: Boolean,
			default: false,
		},
		loadingText: {
			type: String,
			default: '',
		},
		backgroundColor: {
			type: String,
			default: '#fff'
		},
		textColor: {
			type: String,
			default: ''
		},
		textSize: {
			type: Number,
			default: 0,
		}
	},
}
</script>

<style lang="scss" scoped>
@import 'PLoader.scss';
</style>